<template>
  <div class="fixed-table-actionbar">
    <div class="search-bar">
      <el-form :inline="true" :model="formItem" class="form-filter" size="mini">
        <el-form-item>
          <el-date-picker
            v-model="timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            value-format="timestamp"
            @change="search"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formItem.s_globalName"
            size="mini"
            clearable
            placeholder="名称/编码/供应商名称"
            @keyup.enter.native="search"
            @change="onGlobeSearchInputChange"
          />
        </el-form-item>
        <!-- <el-form-item>
          <el-input v-model="formItem.s_code" clearable placeholder="请输入合同编码..." />
        </el-form-item>
        <el-form-item>
          <el-input v-model="formItem.s_supplierName" clearable placeholder="请输入供货方名称..." />
        </el-form-item> -->
        <el-form-item>
          <el-button plain icon="el-icon-search" @click="search" />
        </el-form-item>
      </el-form>
    </div>
    <div class="action-bar">
      <el-button type="primary" size="mini" icon="el-icon-plus" @click="add">新建</el-button>
      <!-- <el-dropdown trigger="click">
        <el-button type="primary" size="mini">
          操作<i class="el-icon-arrow-down el-icon--right" />
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <el-button type="text" size="mini" icon="el-icon-edit" @click="$parent.edit($parent.selections)">
              编辑
            </el-button>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-button type="text" size="mini" icon="el-icon-delete" @click="$parent.remove($parent.selections)">
              删除
            </el-button>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown> -->
      <!-- <el-button size="mini" plain icon="el-icon-tickets" @click="$parent.addItem($parent.selections)">合同项</el-button> -->
    </div>
    <FormDialog class="fixed-dialog-height" title="新建合同信息" width="40%" :show="dialogFormVisible" @on-ok="ok" @on-cancel="cancel">
      <EditForm v-if="dialogFormVisible" ref="editForm" />
    </FormDialog>
  </div>
</template>
<script>
import FormDialog from '@neu/biz-core/components/FormDialog'
// 编辑实例组件独立编写，需要传递id属性，判断新建还是更新操作
import EditForm from './editForm'

// 定义一个查询表单原始项
const formItem = {
  s_globalName: ''
}

export default {
  name: 'ContractActionBar',
  components: {
    FormDialog,
    EditForm
  },
  data() {
    return {
      formItem: {
        ...formItem
      },
      timeRange: [],
      dialogFormVisible: false
    }
  },
  methods: {
    // 新建用户按钮点击处理
    add() {
      this.dialogFormVisible = true
    },
    // 创建用户对话框确认事件处理
    ok() {
      // 直接调用表单实例的保存方法
      this.$refs.editForm.save().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '操作成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.$parent.refresh()
        // 关闭对话框
        this.dialogFormVisible = false
        this.$refs.editForm.reset()
      })
    },
    cancel() {
      this.$refs.editForm.reset()
      this.dialogFormVisible = false
    },
    // 查询按钮点击事件处理
    search: function() {
      if (this.timeRange && this.timeRange.length !== 0) {
        this.formItem.s_signingDateStart = this.timeRange[0]
        this.formItem.s_signingDateEnd = this.timeRange[1]
      } else {
        this.formItem.s_signingDateStart = ''
        this.formItem.s_signingDateEnd = ''
      }
      this.$parent.filter(this.formItem)
    },
    // 重置按钮点击事件处理
    reset: function() {
      this.formItem = {
        ...formItem
      }
      this.search()
    },
    onGlobeSearchInputChange(value) {
      if (value === '') {
        this.search()
      }
    }
  }

}
</script>
